<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/task.css">
    <script src="../js/jq-1.12.4.js"></script>

</head>

<body>
    <section id="taskList">
        <ul id="nav">
            <li>日常任务</li>
            <li>成长任务</li>
        </ul>
        <div class="taskContent">
            <ul id="dayTask">
                <li>
                    <div>
                        <h1>交口称赞</h1>
                        <p>为喜欢的回答送出一个赞</p>
                        <p>奖励：<span>财富值×10</span><span>经验之石（小）×1</span></p>
                    </div>
                    <div><input type="button" value="前往"></div>
                </li>
                <li>
                    <div>
                        <h1>每日答题</h1>
                        <p>前往回答一个问题</p>
                        <p>奖励：<span>铜宝箱×1</span><span>财富值×10</span><span>经验之石（小）×1</span></p>
                    </div>
                    <div><input type="button" value="前往"></div>
                </li>
                <li>
                    <div>
                        <h1>助人为乐</h1>
                        <p>当日获得1个采纳</p>
                        <p>奖励：<span>铜宝箱×1</span><span>财富值×10</span></p>
                    </div>
                    <div><input type="button" value="前往"></div>
                </li>
            </ul>
            <ul id="growTask">
                <li>
                    <div>
                        <h1>成长之路</h1>
                        <p>知道等级达到2级</p>
                        <p>奖励：<span>财富值×20</span><span>铜宝箱×1</span><span>准备入学微章×1</span></p>
                    </div>
                    <div><input type="button" value="前往"></div>
                </li>
                <li>
                    <div>
                        <h1>知识之路</h1>
                        <p>在知道获得1个采纳</p>
                        <p>奖励：<span>铜宝箱×1</span><span>财富值×20</span><span>经验之石（小）×1</span></p>
                    </div>
                    <div><input type="button" value="前往"></div>
                </li>
                <li>
                    <div>
                    </div>
                    <div><input type="button" id="del" value="解除绑定"></div>
                </li>
            </ul>
        </div>
    </section>
    <script src="../js/jq-1.12.4.js"></script>
    <script>
        $(function () {
            let firstTap = $("#nav li:first")
            let lastTap = $("#nav li:last")
            firstTap.on("click", function () {
                $("#dayTask").show()
                $("#growTask").hide()
                $(".taskContent").css("background-color", "#26A6E3")
            })

            lastTap.on("click", function () {
                $("#dayTask").hide()
                $("#growTask").show()
                $(".taskContent").css("background-color", "#FF9400")
            })

            $("#del").click(function () {
                firstTap.off("click")
            })
        })
    </script>
</body>

</html>